<template>
  <div class="move">
    <el-main>
      <!-- //中间区域 -->
      <div class="main1">
        <!-- 奖项内容 -->
        <div class="gpa">
          <my-new-cgpa></my-new-cgpa>
        </div>
        <!-- 大学习+绩点图内容 -->
        <div class="threeRate">
          <my-sc></my-sc>
        </div>
      </div>
      <!-- 右侧区域 -->
      <div class="flat">
        <!-- 班级具体信息 -->
        <div class="pass">
          <my-work></my-work>
        </div>
        <!-- 深造率 -->
        <div class="fight">
          <my-benefit></my-benefit>
        </div>
      </div>
    </el-main>
  </div>
</template>

<script>
import MyWork from "@/components/MyWork.vue";
import MyBenefit from "@/components/MyBenefit.vue";
import MySc from "@/components/MySc.vue";
import MyNewCgpa from "@/components/MyNewCgpa.vue";

export default {
  components: { MyWork, MyBenefit, MySc, MyNewCgpa },
};
</script>

<style scoped>
@import url("@/global.css");
.move {
  position: relative;
  top: -20px;
  /* transform: scale(0.98); */

  width: 100%;
  height: 104%;
  box-sizing: border-box;
  /* padding-bottom:30px */
  /* background-color: aqua; */
}
/* 主体左右部分调节 */
.el-main {
  height: 100%;
  /* background-color: antiquewhite; */
  margin-left: 15px;
}
/* 左 */
.main1 {
  float: left;
  box-sizing: border-box;
  width: 58%;
  height: 33.7rem;
  /* height: 740px; */
  /* border-right: 1px solid #000; */
  /* background-color: azure; */
  margin-right: 20px;
  margin-top: 23px;
}
/* 右 */
.flat {
  float: right;
  box-sizing: border-box;
  width: 40%;
  height: 32.6rem;
  /* height: 740px; */
  margin-top: 23px;
  /* margin-bottom: 23px; */
  /* background-color: aqua; */
}
/* 左边图表部分 */
/* 绩点部分 */
.gpa {
  box-sizing: border-box;
  width: 100%;
  height: 55%;
  /* border-bottom: 1px solid #000; */
}
/* 三率部分 */
.threeRate {
  width: 100%;
  height: 45%;
}
/* 右边图表 */
/* 作业完成率部分 */
.pass {
  box-sizing: border-box;
  width: 100%;
  height: 65%;
  /* padding: 10px; */
  /* border-bottom: 1px solid #000; */
}
/* 站点完成情况部分 */
.fight {
  box-sizing: border-box;
  width: 100%;
  height: 32%;
  margin-top: 20px;
}
</style>